<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .fruit {
        width: 1000px;
        margin: 50px auto;
      }
      select {
        padding: 10px;
        font-size: 30px;
        width: 300px;
        height: 400px;
        display: inline-block;
      }
      .button {
        position: relative;
        top: -180px;
        display: inline-block;
        width: 80px;
      }
      .button button {
        font-size: 25px;
        margin: 10px 0;
        height: 40px;
        width: 80px;
      }
    </style>
  </head>
  <body>
    <div class="fruit">
      <select class="fruit1" name="fruit1" id="" multiple size="10">
        <option value="banana">香蕉</option>
        <option value="apple">苹果</option>
        <option value="pear">鸭梨</option>
        <option value="orange">橘子</option>
      </select>
      <div class="button">
        <button class="add">></button>
        <button class="addAll">>>></button>
        <button class="remove"><</button>
        <button class="removeAll"><<<</button>
      </div>

      <select class="fruit2" name="fruit2" id="" multiple size="10"></select>
    </div>
  </body>
  <script>
    // 左右侧选择框
    var fruit1 = document.getElementsByClassName("fruit1")[0];
    var fruit2 = document.getElementsByClassName("fruit2")[0];
    // 选项
    var opts = document.getElementsByTagName("option");
    // 四个按钮
    var add = document.getElementsByClassName("add")[0];
    var addAll = document.getElementsByClassName("addAll")[0];
    var remove = document.getElementsByClassName("remove")[0];
    var removeAll = document.getElementsByClassName("removeAll")[0];
    // 单击往右侧添加按钮
    add.onclick = function () {
      for (var i = 0; i < opts.length; i++) {
        if (opts[i].selected) {
          fruit2.appendChild(opts[i]);
          // i--;
        }
      }
    };
    // 单击 往右侧全部添加按钮
    addAll.onclick = function () {
      for (var j = 0; j < opts.length; j++) {
        fruit2.appendChild(opts[0]);
      }
    };
    // 单击往左侧添加按钮
    remove.onclick = function () {
      for (var i = 0; i < opts.length; i++) {
        if (opts[i].selected) {
          fruit1.appendChild(opts[i]);
          // i--;
        }
      }
    };
    // 单击 往左侧全部添加按钮
    removeAll.onclick = function () {
      for (var j = 0; j < opts.length; j++) {
        fruit1.appendChild(opts[j]);
      }
    };
  </script>
</html>
